<template>
  <div class="copy">
    <div class="all-copy-box">
      <div class="copy-title">
        抄送列表
      </div>
      <div class="bill-table">
        <div class="table_box">
          <el-table
              :data="tableData"
              stripe
              style="width: 98%;height: 88vh"
              border
              max-height="88vh"
              empty-text="暂无数据"
          >
            <el-table-column
                fixed
                prop="finance_index"
                label="ID"
                width="60"
                align="center"
            />
            <el-table-column
                prop="total_money"
                label="报销总金额(元)"
                width="150"
                align="center"
            />
            <el-table-column
                prop="status"
                label="状态"
                align="center"
                width="120"
            >
              <template #default="{row}">
                <el-tag type="info" v-if="row.status === 0">已提交</el-tag>
                <el-tag type="warning" v-else-if="row.status === 1">审批中</el-tag>
                <el-tag type="success" v-else>已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                prop="flow_uploader_name"
                label="申请人"
                width="150"
                align="center"
            />
            <el-table-column
                prop="bill_no"
                label="报销凭证编号"
                align="center"
                width="330"
            />
            <el-table-column
                prop="bill_date"
                label="原始单据日期"
                align="center"
                width="180"
            >
              <template #default="{row}">
                {{computeDate(row.bill_date)}}
              </template>
            </el-table-column>
            <el-table-column
                prop="enter_month"
                label="入账月份"
                align="center"
                width="120"
            >
              <template #default="{row}">
                {{row.enter_month}}月
              </template>
            </el-table-column>
            <el-table-column
                label="录入时间"
                width="180"
                align="center"
            >
              <template #default="{row}">
                {{sliceDate(row.created_at)}}
              </template>
            </el-table-column>
            <el-table-column
                prop="flow_operator_name"
                label="当前/最后审批人"
                align="center"
                width="150"
            />
            <el-table-column
                label="操作"
                align="center"
            >
              <template #default="{row}">
                <el-button
                    type="primary"
                    size="small"
                    @click="showDetails(row.application_id)"
                >+
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>

  <FinPreDialog ref="billDetail"/>
</template>

<script setup>
import {ElButton, ElInput, ElMenu, ElMenuItem, ElMessage, ElTable, ElTableColumn, ElTag} from "element-plus"
import {onMounted, ref} from "vue"
import {getCopyList} from "@/api"
import {computeDate} from "@/lib/utils.js"
import FinPreDialog from "@/components/Finance/Bill/FinPreDialog.vue"
import {useRoute} from "vue-router"
import {getCopyBills} from "@/api/Finance/Bill"
import emitter from "@/lib/eventBus"

const route = useRoute()

let currentUser
const tableData = ref([])
const handleALL = ref()
const billDetail = ref()

let upTop_id

onMounted(() => {
  try {
    emitter.emit('home_menu','/copy_bill')
    getUser()
    getFinCopyList()
    if(route && route.query){
      upTop_id = route.query.approve_id
    }
  } catch (e) {
    console.log(e)
  }
})


const getUser = () => {
  currentUser = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

const getFinCopyList = async () => {
  try {
    const {data:res} = await getCopyBills({
      userId:currentUser.id
    })
    if(res.code !== 200){
      return ElMessage({
        message:'获取列表失败',
        type:'error',
      })
    } else {
      tableData.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}

const showDetails = (id) => {
  billDetail.value.showDetails(id)
}

const sliceDate = (utc_datetime) => {
  let new_datetime = utc_datetime.split("T")[0] + " " + utc_datetime.split("T")[1].split(".")[0]

  // 处理成为时间戳
  let timestamp = new Date(new_datetime.replace(/-/g, '/')).getTime()
  timestamp = timestamp / 1000
  // 增加8个小时，北京时间比utc时间多八个时区
  timestamp = timestamp + 8 * 60 * 60

  // 时间戳转为时间
  let date = new Date(parseInt(timestamp) * 1000)
  let YY = date.getFullYear() + '-'
  let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
  let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
  return YY + MM + DD + " " + hh + mm + ss
}
</script>

<style scoped lang="less">
.all-copy-box{
  box-sizing: border-box;
  padding: 0 1vh;
  border: 1px solid lightgray;
  margin-left: 8.5vw;
  margin-top: 2vh;
  width: 91vw;
  height: 96.5vh;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 7px 7px lightgray;
  .copy-title{
    height: 6vh;
    text-align: left;
    padding-left: 1vw;
    line-height: 7vh;
    font-size: 2.4vh;
    font-weight: 600;
  }
  .bill-table{
    .table_box{
      width: 92vw;
    }
  }
}
</style>
